<template>
  <div class="layout">
    <!-- 左侧导航 -->
    <left-nav  :activeMenuList="activeMenuList"  :menuList="menuList" :activeKey="activeKey"></left-nav>
    <div class="content">
      <!-- 右侧头部组件 -->
      <right-header :menuList="menuList" @changeKey="changeKey"></right-header>
      <!-- 页面二级路由出口 -->
      <div class="main">
        <router-view></router-view>
      </div>
    </div>
    <!-- 二级路由出口 -->
  </div>
</template>

<script>
import LeftNav from "./LeftNav.vue";
import RightHeader from "./RightHeader.vue";
import { userMenuAuth } from "@/api/account";

export default {
  data() {
    return {
      menuList: [],
      activeKey:0,
      activeMenuList:[]
    }
  },
  components: { LeftNav, RightHeader },
  mounted(){
    this.getMenuList()
  },
  methods:{
    async getMenuList() {
      let res = await userMenuAuth({ remark: "pvg_vehicle" });
      this.menuList = res.data;
      this.activeMenuList = res.data
     
    },
    changeKey(key){
      this.activeKey = key
      this.activeMenuList = this.menuList[key].children

    }
  }
  
};
</script>

<style lang="less" scoped>
.layout {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;

  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f0f2f5;

    .main {
      flex: 1;
      // overflow-y: scroll;
      // background: green;
      padding: 20px;
    }
  }
}
</style>